import { Component } from 'react';
import styles from './index.module.scss';
import { isMobile } from 'react-device-detect';

class Frontend extends Component {
  state = {
    personalInfo: {
      name: 'Black',
      position: '前端工程师',
      birth: '2000 年 1 月 9 日',
      political: '中共党员',
      phone: '+86 18431254800',
      email: '2315404869@qq.com',
      website: 'https://www.huangtianyu.website',
      csdn: 'https://blog.csdn.net/Bl_a_ck'
    },
  };

  /* 
    这是组件中唯一必须实现的方法
    它负责将组件的 JSX 结构转换为实际的 DOM 元素
    每次组件状态（state）或属性（props）发生变化时，都会触发重新渲染
  */
  render() {
    const { personalInfo } = this.state;

    return (
      <div className={styles.resumeContainer}>
        <div className={styles.resume}>
          {/* 个人信息 */}
          <section className={styles.section}>
            <div className={styles.personalRow}>
              {/* 个人头像 */}
              <div className={styles.personalImage}>
                <img src={require('@/assets/images/me_frontend.jpg')} alt="个人头像" />
              </div>
              {/* 信息主体 */}
              <div className={styles.personalInfo}>
                <div className={styles.personalName}>
                  <h1>{personalInfo.name}</h1>
                  <h2>{isMobile ? personalInfo.position : `意向岗位：${personalInfo.position}`} </h2>
                </div>
                <div className={styles.infoGrid}>
                  <div>🎂 出生年月：{personalInfo.birth}</div>
                  <div>📍 政治面貌：{personalInfo.political}</div>
                  <div>📞 联系电话：{personalInfo.phone}</div>
                  <div>📧 邮箱：{personalInfo.email}</div>
                  <div>🌐 个人网站： <a href={personalInfo.website} target="_blank" rel="noopener noreferrer">Black的个人空间</a></div>
                  <div>📝 CSDN：<a href={personalInfo.csdn} target="_blank" rel="noopener noreferrer">Black的技术博客</a></div>
                </div>
              </div>
            </div>
          </section>
          {/* 教育背景 */}
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>🎓</span>
            <span className={styles.title}>教育背景</span> 
          </h2>
          <section className={styles.section}>
            <div>
              <div className={styles.eduRow}>
                <span className={styles.eduPeriod}>2019.09 - 2023.06</span>
                <span className={styles.eduSchool}>
                  <a href="https://www.bucea.edu.cn/" target="_blank" rel="noopener noreferrer">
                    北京建筑大学
                  </a>
                </span>
                <span className={styles.eduCollege}>
                  <a href="https://beijing.buaa.edu.cn/" target="_blank" rel="noopener noreferrer">
                    智能科学与技术学院/计算机科学与技术  |  本科（联培）
                  </a>
                </span>
              </div>
              <div className={styles.eduCourses}>
              主修课程：C语言程序设计、数据结构、计算机组成、操作系统、计算机网络、数据库系统原理、算法设计与分析、软件工程、Java程序设计、C++与C#程序设计、Unix系统、Android平台开发技术、编译技术
              </div>
            </div>
            <div>
              <div className={styles.eduRow}>
                <span className={styles.eduPeriod}>2023.09 - 2026.06</span>
                <span className={styles.eduSchool}>
                  <a href="https://www.bucea.edu.cn/" target="_blank" rel="noopener noreferrer">
                    北京建筑大学
                  </a>
                </span>
                <span className={styles.eduCollege}>
                  <a href="https://dxxy.bucea.edu.cn/index.htm" target="_blank" rel="noopener noreferrer">
                    智能科学与技术学院/计算机科学与技术  |  学术型硕士
                  </a>
                </span>
              </div>
              <div className={styles.eduCourses}>
                在校期间发表CCF-C类会议论文一篇，授权国家发明专利三项，参编学术专著一篇，登记软件著作权三项。
              </div>
            </div>
          </section>

          
          {/* 实习经历 */}
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>🏢</span>
            <span className={styles.title}>实习经历</span> 
          </h2>
          <section className={styles.section}>
            <div>
              <div className={styles.experienceRow}>
                <span className={styles.experiencePeriod}>2024.05 - 2024.07</span>
                <span className={styles.experienceCompany}>
                  <a target="_blank" rel="noopener noreferrer">
                    中国航天科工某所某部
                  </a>
                </span>
                <span className={styles.experiencePosition}>
                  <a target="_blank" rel="noopener noreferrer">
                    外协研究员
                  </a>
                </span>
              </div>
              <div className={styles.experienceDesc}>
                <div>&emsp;同合作方开发团队进行系统的研发、联调、测试工作，主要负责显控软件部分。与合作方硬件团队成员对接通讯协议和界面样式，与合作方软件团队成员对接技术指标，4月8日至6月1日进行显控软件出厂前的开发和调试，6月2日设备出厂后同硬件人员驻场参与硬件和软件的现场测试、交付工作。</div>
              </div>
            </div>
          </section>

          <section className={styles.section}>
            <div>
              <div className={styles.experienceRow}>
                <span className={styles.experiencePeriod}>2025.06 - 今</span>
                <span className={styles.experienceCompany}>
                  <a href="https://www.hikvision.com/" target="_blank" rel="noopener noreferrer">
                    杭州海康威视数字技术股份有限公司
                  </a>
                </span>
                <span className={styles.experiencePosition}>
                  <a target="_blank" rel="noopener noreferrer">
                    Web前端工程师
                  </a>
                </span>
              </div>
              <div className={styles.experienceDesc}>
                <div>&emsp;任职于杭州海康威视总部国际业务中心应用软件Web开发部，6月15日至7月15日从事定制业务的开发工作，负责在公司web端4.0和5.0的基线代码上开发定制页面和功能，控制端通信采用http协议，流媒体通信为公司加密协议。7月16日至今从事基线业务的开发工作，负责开发公司Web5.0的基线服务，包括5.0新设备页面原型开发、Web端UI库HUI的开发和本组效能工具FetchCode缺陷的修复工作。</div>
              </div>
            </div>
          </section>

          {/* 项目经历 */}
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>💻</span>
            <span className={styles.title}>项目经历</span> 
          </h2>
          <section className={styles.section}>
            <div>
              <div className={styles.projectRow}>
                <span className={styles.projectPeriod}>2024.03 - 2024.12</span>
                <span className={styles.projectName}>
                  <a target="_blank" rel="noopener noreferrer">
                    工控软件项目
                  </a>
                </span>
              </div>
              <div className={styles.projectDesc}>
                <div>&emsp;项目一为本人独立开发的B/S架构双屏显控软件。技术栈为Vue2+Express+WebRTC+Cesium，实现实时视频传输（200±50ms延迟）与实时设备控制（40±10ms延迟），集成地图显示及6个子系统控制模块，支持多协议（HTTP/WebSocket/TCP/UDP）通信，项目签约金额20万。</div>
                <div>&emsp;项目二开发框架基于项目一，前端技术栈升级至Vue3，开发三屏显控系统，集成地图显示及2个子系统控制模块，项目签约金额10万。</div>
              </div>
            </div>
            <div>
              <div className={styles.projectRow}>
                <span className={styles.projectPeriod}>2024.09 - 2024.12</span>  
                <span className={styles.projectName}>
                  <a href="http://47.92.39.196:9529/Staff" target="_blank" rel="noopener noreferrer">
                    中财京伟信息服务一体化平台
                  </a>
                </span>
              </div>
              <div className={styles.projectDesc}>
                <div>&emsp;中财京伟信息服务一体化平台部署于中财京伟公司的云服务器，用于实现信息化公司各项业务和人员管理。平台由公司OA系统、大兴区政务服务系统、海淀区政务服务系统组成，OA系统用于公司运维和员工管理、政务服务系统用于按照公司业务逻辑生成政务报表。平台由实验室横向团队开发，本人负责横向团队的管理和前后端架构。开发使用B/S架构，技术栈为react+微信小程序+django+docker，该项目未签约。</div>
              </div>
            </div>
          </section>

          {/* 个人技能 */}
          <h2 className={styles.sectionTitle}>
            <div className={styles.icon}>💪</div>
            <div className={styles.title}>个人技能</div> 
          </h2>
          <section className={styles.section}>
            <div className={styles.skills}>
              <div className={styles.skillTitle}>B/S 架构开发</div>
              <div className={styles.skillDesc}>
              熟练掌握 
              JavaScript <img src={require('@/assets/images/logo/JS.png')} alt="JavaScript" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} />
              TypeScript <img src={require('@/assets/images/logo/TS.png')} alt="TypeScript" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} /> 
              掌握 Vue2 <img src={require('@/assets/images/logo/Vue.png')} alt="Vue2" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} />
              Vue3 <img src={require('@/assets/images/logo/Vue.png')} alt="Vue3" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} />
              React <img src={require('@/assets/images/logo/React.png')} alt="React" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} /> 框架，
              能够独立设计功能组件；熟悉 Python 语言，掌握 Django、Express 等后端开发架构；熟练使用 
              Cursor <img src={require('@/assets/images/logo/cursor.png')} alt="Cursor" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} />
              Copilot <img src={require('@/assets/images/logo/copilet.png')} alt="Copilot" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} />
              Deepseek <img src={require('@/assets/images/logo/deepseek.png')} alt="Deepseek" style={{ height: '20px', verticalAlign: 'middle', marginLeft: '5px', marginBottom: '2px' }} /> 等 AI 生产力工具
              </div>
              <div className={styles.skillTitle}>低延时通讯开发</div>
              <div className={styles.skillDesc}>
              了解 TCP/IP 协议族的通信原理，掌握 Websocket、WebRTC 等低延时通信技术，了解流媒体编解码原理和推拉流过程，具备搭建流媒体客户端的能力。
              </div>
            </div>
          </section>
        </div>
      </div>
    );
  }
}

export default Frontend;